<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script th:src="@{webjars/highcharts/8.0.4/highcharts.js}" src="webjars/highcharts/8.0.4/highcharts.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新冠病毒实时统计</title>
</head>
<body>
<script type="text/javascript" th:inline="javascript" key="index">
    var a = [[${cty}]]
    var b = [[${tol}]]
    var c = [[${dif}]]
</script>
<h1 th:text="(${country}=='all'?'全球':${country})+'冠状病毒统计数据'"></h1>

<p th:text="'截止今天的'+(${country}=='all'?'全球':${country})+'新冠病毒总病例数'+${totalReportedCases}"></p>

<p>当前时间
    <span th:text="${#temporals.format(localDate,'yyyy-MM-dd')}"></span>
</p>

<p>
    <span th:text="'自前一天以来的'+(${country}=='all'?'全球':${country})+'冠状病毒新增病例数'"></span>
    <span th:text="${totalNewCases}"></span>
</p>
<form th:action="@{/}" method="get">
    <p><input type="text" name="country" required></p>
    <input type="submit" value="搜索"/>
</form>

<div id="container" style="min-width: 300px;height: 400px;margin: 0 auto"></div>
<script type="text/javascript">

    var chart = Highcharts.chart('container',{
        chart: {
            type: 'column'
        },
        title: {
            text: '全球确诊人数前十二国家'
        },
        xAxis: {
            categories: [
                a[0],a[1],a[2],a[3],a[4],a[5],a[6],a[7],a[8],a[9],a[10],a[11]
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '确诊人数(人)'
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y} 人</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        series: [{
            name: '确诊总人数',
            data: [b[0],b[1],b[2],b[3],b[4],b[5],b[6],b[7],b[8],b[9],b[10],b[11]]
        }, {
            name: '新增确诊患者人数',
            data: [c[0],c[1],c[2],c[3],c[4],c[5],c[6],c[7],c[8],c[9],c[10],c[11]]
        }]
    });
</script>
<table id="datatable">
    <tr>
        <th>州、省</th>
        <th>国家</th>
        <th>当前病例</th>
        <th>近一日新增病例</th>
    </tr>


    <tr th:each="stats : ${regionStats}">
        <td th:text="${stats.getState()}"></td>
        <td th:text="${stats.getCountry()}"></td>
        <td th:text="${stats.getLatestTotalCases()}"></td>
        <td th:text="${stats.getDiffFromPrevDay()}"></td>
    </tr>


</table>
</body>
</html>